<template>
  <div class="news">
      <x-header :left-options="{backText:''}" class='whiteHeader'>消息中心</x-header>      
      
      <scroller :on-infinite="infinite" class='myScroller' ref="myScroller" noDataText="暂无更多数据">
          <!--注意：使用scroller组件时必须用一个大div包裹住数据层，否则第一条数据会变形-->
      <div>    
        <div 
            class="newsInfo" v-if="newsMess[0].news.length!=0" v-for="item in newsMess[selectIndex].news"          
        >            
            <div class="newsDetail"> 
                <img v-if="item.KEY==3" src="../../assets/image/msgCenter/03.png" alt="" />
                <img v-else-if="item.KEY==6" src="../../assets/image/msgCenter/06.png" alt="" />
                <img v-else-if="item.KEY==10" src="../../assets/image/msgCenter/10.png" alt="" />
                <img v-else-if="item.KEY==14" src="../../assets/image/msgCenter/14.png" alt="" />
                <img v-else-if="item.KEY==17" src="../../assets/image/msgCenter/17.png" alt="" />
                <img v-else-if="item.KEY==20" src="../../assets/image/msgCenter/20.png" alt="" />
                <img v-else-if="item.KEY==26" src="../../assets/image/msgCenter/26.png" alt="" />
                <img v-else-if="item.KEY==29" src="../../assets/image/msgCenter/29.png" alt="" />
                <img v-else-if="item.KEY==32" src="../../assets/image/msgCenter/32.png" alt="" />
                <img v-else-if="item.KEY==35" src="../../assets/image/msgCenter/35.png" alt="" />
                <img v-else-if="item.KEY==38" src="../../assets/image/msgCenter/38.png" alt="" />
                <img v-else-if="item.KEY==43" src="../../assets/image/msgCenter/43.png" alt="" />
                <img v-else-if="item.KEY==47" src="../../assets/image/msgCenter/47.png" alt="" />
                <img v-else-if="item.KEY==51" src="../../assets/image/msgCenter/51.png" alt="" />
                <img v-else-if="item.KEY==54" src="../../assets/image/msgCenter/54.png" alt="" />
                <img v-else-if="item.KEY==61" src="../../assets/image/msgCenter/61.png" alt="" />
                <img v-else-if="item.KEY==64" src="../../assets/image/msgCenter/64.png" alt="" />
                <img v-else-if="item.KEY==67" src="../../assets/image/msgCenter/67.png" alt="" />
                <img v-else-if="item.KEY==73" src="../../assets/image/msgCenter/73.png" alt="" />
                <img v-else src="../../assets/image/msgCenter/64.png" alt="" />
                <p>{{item.CONTENT}}</p>
            </div>
            <div class="newsDate">
                <p>{{item.SENDDATE}}</p>
            </div>
        </div>
      </div>    
      </scroller>        
      <!--<div class="footerBlank"></div>-->
  </div>
</template>
<script>
import {XHeader} from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
export default {
  name:"newsList",
  // 数据
  data(){

    return{
    	userId:'',//用户id                                 
        newsMess:[{news:[]}],//所有消息数据
        selectIndex:0,//选择的选项        
        pages:[{page:1,flag:false}],//页数数组
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    //this.userId=169623;
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
      //获取所有消息（第一次）
      getNews(){      	
          let obj = {};
          obj.userid = this.userId;
          obj.pageNo = 1;
          this.$fetchPost('/CNotificationWeb/newPageAllNotification.action',obj).then(res=>{                 
                if(res.STATUS_CODE == 1){                     
                    if(res.RESULT_DATA.length==0){
				          		this.$refs.myScroller.finishInfinite(2);//通知scroller数据全部加载完成
				          		this.pages[this.selectIndex].flag=true;
	          					return;
                    }
	                    this.pages[this.selectIndex].page++;
	                    this.newsMess[this.selectIndex].news=res.RESULT_DATA;
	                    this.$refs.myScroller.finishInfinite(2);//通知scroller数据已经加载完成                                        
                }      
                console.dir(res);
          },err=>console.log(err));
      },
      //下拉加载更多
      getMoreNews(){
          if(this.pages[this.selectIndex].flag){
    		this.$refs.myScroller.finishInfinite(2);
    		return;
    	  }  
          let obj = {};
          obj.userid = this.userId;
          obj.pageNo = this.pages[this.selectIndex].page;
          this.$fetchPost('/CNotificationWeb/newPageAllNotification.action',obj).then(res=>{              
                if(res.STATUS_CODE == 1){                     
                    if(res.RESULT_DATA.length==0){
          		this.$refs.myScroller.finishInfinite(2);//通知scroller数据全部加载完成
          		this.pages[this.selectIndex].flag=true;
          		return;
                    }
                    this.$refs.myScroller.finishInfinite();//通知scroller数据已经加载完成
                    this.pages[this.selectIndex].page++;
                    //数组拼接concat
                    this.newsMess[this.selectIndex].news=this.newsMess[this.selectIndex].news.concat(res.RESULT_DATA);
                    this.$refs.myScroller.finishInfinite();
                    //console.dir(this.newsMess[this.selectIndex].news);
                }                                 
          },err=>console.log(err));
      },
      infinite(){
      			//console.dir(0);
            if(this.pages[this.selectIndex].page>1){  
                setTimeout(()=>this.getMoreNews(),1000);                                              
            }else{              
                   this.getNews();
            }
      },
               
  },
  // 子组件
  components:{
    XHeader
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>    
.vux-header{
		border-bottom:1px solid #fefefe;
	}
.news{      
		background:#e4e4e4;
		min-height:100%;		       
    .myScroller{
  			top:1.2rem;         	
    }           
    .newsInfo{
        display:flex;
        flex-flow:column;
        justify-content:center; 
        background:#e4e4e4;             
        .newsDetail{
            align-self:center;
            width:78%;
            background:#f8f8f8;
            border:0.01rem solid #f8f8f8;
            border-radius:0.2rem;
            display:flex;
            flex-flow:column;  
            position:relative;
            img{
                position:absolute;
                left:-0.7rem;
                top:0.1rem;
                width:0.5rem;
                height:0.5rem;
            }
            p{            	
                width:90%;                
                padding-top:0.15rem;
                padding-bottom:0.15rem;    
                padding-left:0.2rem;
                color:#222;
                font-size:0.26rem;
                text-align:left;
            }
        }
        .newsDate{
            width:100%;            
            display:flex;
            flex-flow:column;            
            p{
                margin-top:0.18rem;
                margin-bottom:0.3rem;
                font-size:0.24rem;
                color:#999;
                align-self:center;
            }
        }
    }
    .noNews{
        p{
            font-size:0.36rem;
            color:#666666;
        }
    }
    .footerBlank{
        width:100%;
        height:1rem;
        background:#fff;
    }
}
</style>
